import React,{Component, useEffect, useState} from "react";
import { Button, Modal } from 'antd';

import { useParams } from "react-router-dom";
import axios from "axios";
export default function Sp(){

    const name=useParams()
   

    const [data,setData]=useState([])
    const [fdata,setFdata]=useState([])

    useEffect(()=>{
        getlist()
    },[])
    useEffect(()=>{
        filterdata()
    },[name,data])

    const getlist=async()=>{
        await axios.get(`http://localhost:3000/type`).then((res)=>{
            if(res.status==200){
             
                setData(res.data)
            }
        })
    }
    const filterdata=()=>{
      if(!name){
        setFdata(data)

        return
      }

      const lname=name.name.toLowerCase()
      const filterd=data.filter(i=>i.name.toLowerCase().includes(lname))
      setFdata(filterd)
    }

return(
    <div>名字：{name.name}
    
    <div>
        {
            fdata.map((i)=>{
                return(
                    <div>
                        <p>{i.name}</p>
                        </div>
                )
            })
        }

    </div>
    
    </div>
)
}

